<template>
   <div>
      <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item><a href="javascript:;">账户管理</a></el-breadcrumb-item>
         <el-breadcrumb-item>账户列表</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="hengxian"></div>

      <el-row>
         <el-col :span="5">
            <div>
               <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select" size="mini">
                  <el-select v-model="cate" slot="prepend" placeholder="请选择">
                     <el-option label="用户ID" value="id"></el-option>
                     <el-option label="名称" value="name"></el-option>
                     <el-option label="电话" value="phone"></el-option>
                  </el-select>
                  <el-button slot="append" @click="handleSearch" icon="el-icon-search"></el-button>
               </el-input>
            </div>
         </el-col>
      </el-row>

      <el-table :data="accounts" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
         <el-table-column label="用户ID" prop="user_id" width="90"></el-table-column>
         <el-table-column label="姓名" prop="name"></el-table-column>
         <el-table-column label="电话" prop="phone"></el-table-column>
         <el-table-column label="余额" prop="money"></el-table-column>
         <el-table-column label="积分" prop="integral"></el-table-column>
         <el-table-column label="优惠券" prop="">
            <template slot-scope="scope">
               <el-button type="primary" size="mini" @click="handleShowTicket(scope.$index,scope.row)">查看</el-button>
            </template>
         </el-table-column>
         <el-table-column label="创建时间" prop="created_at"></el-table-column>
         <el-table-column label="操作">
            <template slot-scope="scope">
               <el-button type="success" size="mini" @click="handleShow(scope.$index,scope.row)">查看日志</el-button>
               <el-button type="warning" size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
               <!--               <el-button type="danger" size="mini" @click="handleDelete(scope.$index,scope.row)">删除</el-button>-->
            </template>
         </el-table-column>
      </el-table>

      <!--分页-->
      <div class="page">
         <span class="total">共 {{page.total}} 条数据</span>
         <el-pagination background :total="page.total" :page-size="page.size" @current-change="handleCurrentChange"
                        :current-page.sync="page.currentPage" layout="prev, pager, next">
         </el-pagination>
      </div>

      <!--查看优惠券-->
      <el-dialog title="优惠券" :visible.sync="dialogTableTicket">
         <el-tag v-for="item in show_tickets" :key="item.id" style="margin:9px;">{{item.title}}</el-tag>
      </el-dialog>

      <!--日志详情模态框-->
      <el-dialog title="日志详情" :visible.sync="dialogTableShow">
         <el-table :data="accountLogs" border>
            <el-table-column property="created_at" label="日期" width="165"></el-table-column>
            <el-table-column property="name" label="操作员" width="100"></el-table-column>
            <el-table-column property="desc" label="操作记录"></el-table-column>
         </el-table>
      </el-dialog>

      <!--编辑账户-->
      <el-dialog title="编辑账户" :visible.sync="dialogTableEdit" @close='closeDialog'>
         <el-form :model="account" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="金额" prop="money">
               <el-input v-model.number="account.money"></el-input>
            </el-form-item>
            <el-form-item label="积分" prop="integral">
               <el-input v-model.number="account.integral" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="优惠券" prop="ticket_id">
               <el-checkbox-group v-model="ticket_id">
                  <el-checkbox v-for="item in tickets" :key="item.id" :label="item.id">{{item.title}}</el-checkbox>
               </el-checkbox-group>
            </el-form-item>
            <el-form-item class="account">
               <el-button type="primary" @click="updateForm('ruleForm')" size="mini">更新</el-button>
               <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button>
            </el-form-item>
         </el-form>
      </el-dialog>
   </div>
</template>

<script>
   export default {
      name: "Home",
      data() {
         const check = (rule, value, callback) => {
            // if (Number.isInteger(value) && value > 0) {
            //    callback();
            // } else {
            //    callback(new Error("请输入有效数字"));
            // }
            //判断可以为空
            if (value == null || value == undefined || value == '') {
               callback();
            } else {
               if (Number.isInteger(value) && value > 0) {
                  callback();
               } else {
                  callback(new Error("请输入有效数字"));
               }
            }
         };
         return {
            loading: false,
            keyword: '',
            cate: '',
            accounts: [],
            accountLogs: [],
            dialogTableTicket: false,
            dialogTableShow: false,
            show_tickets: [],
            tickets: [],
            ticket_id: [],
            account: {
               id: '',
               money: '',
               integral: '',
            },
            rules: {
               money: [
                  {validator: check, trigger: 'blur'},
               ],
               integral: [
                  {validator: check, trigger: 'blur'}
               ],
            },
            page: {
               total: 0,  //总数
               size: 0,  //每页显示数
               currentPage: 1,
            },
            dialogTableEdit: false,
         }
      },
      created() {
         this.init();
      },
      methods: {
         //搜索
         handleSearch() {
            this.init();
         },
         //分页--获取当前页
         handleCurrentChange(val) {
            this.page.currentPage = val;
            this.init();
         },
         //首页
         init() {
            this.loading = true;
            axios.get(`/admin/shop/accounts?page=${this.page.currentPage}&cate=${this.cate}&keyword=${this.keyword}`)
               .then((res) => {
                  // console.log(res.data);
                  this.accounts = res.data.data;
                  this.page.total = res.data.total;
                  this.page.size = res.data.per_page;
                  this.loading = false;
               })
         },
         //关闭模态框,先清空验证再清除表单
         closeDialog() {
            this.$refs.ruleForm.clearValidate();
            this.$refs.ruleForm.resetFields();
         },
         //查看优惠券
         handleShowTicket(index, row) {
            axios.get(`/admin/shop/accounts/${row.id}/edit`)
               .then((res) => {
                  this.dialogTableTicket = true;
                  this.show_tickets = res.data.tickets;
               })
         },
         //查看日志
         handleShow(index, row) {
            axios.get(`/admin/shop/accounts/${row.id}`)
               .then((res) => {
                  this.dialogTableShow = true;
                  this.accountLogs = res.data;
               })
         },
         //编辑模态框
         handleEdit(index, row) {
            this.dialogTableEdit = true;
            //所有优惠券
            axios.get(`/admin/shop/tickets`)
               .then((res) => {
                  this.tickets = res.data.tickets.data;
               });
            //当前的优惠券
            axios.get(`/admin/shop/accounts/${row.id}/edit`)
               .then((res) => {
                  this.ticket_id = res.data.tickets.map((item) => {
                     return item.id;
                  })
               });
            this.account.id = row.id;
         },
         //更新
         updateForm(formName) {
            this.$refs[formName].validate((valid) => {
               if (valid) {
                  this.account.ticket_id = this.ticket_id;
                  axios.put(`/admin/shop/accounts/${this.account.id}`, this.account)
                     .then((res) => {
                        if (res.data.status == 1) {
                           this.$message({
                              showClose: true,
                              message: res.data.msg,
                              type: 'success'
                           });
                           this.dialogTableEdit = false;
                           this.init();
                        } else {
                           this.$message({
                              showClose: true,
                              message: res.data.msg,
                              type: 'error'
                           });
                        }
                     })
               } else {
                  console.log('error submit!!');
                  return false;
               }
            });
         },
         resetForm(formName) {
            this.$refs[formName].resetFields();
         },
      }
   }
</script>

<style>
   .account {
      margin-top: 35px;
   }
</style>